<template>
	<view style="padding: 32rpx 30rpx;">
		<!-- <view class="stitle">{{datalist.title}}</view> -->
		<view class="Couponcode">
			<view class="name">兑换码</view>
			<view class="msg">向商户出示此二维码，扫码核销使用</view>
			<view class="code_img">
				<!-- <image :src="datalist." mode=""></image> -->
				<ikun-qrcode 
				    width="260"
				    height="260"
				    unit="rpx"
				    color="#000000"
				    :data="datalist.writeOffNo" 
				/>
			</view>
			<view class="code_nub">券码：{{datalist.writeOffNo}}</view>
		</view>
		<view class="borst"></view>
		<view class="merchants">
			<view class="coupon-content">
			  <view class="coupon-img">
			    <image :src="'https:' + datalist.productPics[0]" mode="aspectFill"></image>
			  </view>
			  <view class="coupon-info">
			    <view class="coupon-title">{{ datalist.productName }}</view>
			    <!-- <view class="coupon-price">￥{{ datalist.productPrice || '0.00' }}</view> -->
				<view class="coupon_sum">×{{datalist.quantity}}</view>
				<view class="coupon-price">
					<image src="/static/my/integra.png" mode="widthFix"></image>
					<view>{{datalist.productCredit}}</view>
				</view>
			  </view>
			</view>
			<view class="mlb">
				<view>领取门店：</view>
				<view>{{datalist.productShopName}}</view>
			</view>
			<view class="mlb">
				<view>门店地址：</view>
				<view>{{datalist.productShopAddress}}</view>
			</view>
			<view class="mlb">
				<view>楼层：</view>
				<view>{{datalist.floorName}}</view>
			</view>
			<view class="mlb">
				<view>门牌号：</view>
				<view>{{datalist.shopNumber}}</view>
			</view>
			<view class="title">订单信息</view>
			<view class="lbe">
				<view>订单编号：</view>
				<view>{{datalist.orderNo}}</view>
			</view>
			<view class="lbe">
				<view>创建时间：</view>
				<view>{{datalist.createTime | formatDate}}</view>
			</view>
			<view class="lbe">
				<view>抵扣积分：</view>
				<view>{{datalist.paidCredit}}</view>
			</view>
			<view class="lbe">
				<view>支付方式：</view>
				<view>积分抵扣</view>
			</view>
			<!-- <view class="add">{{datalist.shopAddress}}</view> -->
		</view>
	</view>
</template>

<script>
     import { ucreditOrderponinfo } from '@/core/api/index.js'
	 import  IkunQrcode from '@/components/ikun-qrcode/ikun-qrcode.vue'
     export default{
		 data(){
			 return{
				 datalist:{}
			 }
		 },
		 components:{
			 IkunQrcode
		 },
		 onLoad(r) {
		 	console.log(r)
			this.UserCouponInfo(r.id)
		 },
		 methods:{
			async UserCouponInfo(id){
				const data = await ucreditOrderponinfo(id)
				this.datalist = data.data
				this.code()
			 }
		 }
	 }
</script>
<style>
	page{
		background-color: var(--Color, #F26B2E);
	}
</style>
<style lang="scss">
	.stitle{
		height: 72rpx;
		line-height: 72rpx;
		background-color: #FEF0EA;
		font-size: 28rpx;
		font-weight: 600;
		padding-left: 25rpx;
	}
	.coupon-content {
	  display: flex;
	  padding: 20rpx 0;
	  margin-bottom: 30rpx;
	}
	
	.coupon-img {
	  width: 120rpx;
	  height: 120rpx;
	  margin-right: 20rpx;
	  border-radius: 8rpx;
	  overflow: hidden;
	}
	
	.coupon-img image {
	  width: 100%;
	  height: 100%;
	}
	.borst{
		height: 16rpx;
		background: rgba(0, 0, 0, 0.35);
        border-radius: 40rpx;
	}
	.coupon-info {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  position: relative;
	  .coupon_sum{
		  position: absolute;
		  right: 0%;
		  top: 0%;
	  }
	  .coupon-price{
		  // position: absolute;
		  // right: 0%;
		  // bottom:0%;
		  image{
			  width: 20rpx;
			  margin-right: 5rpx;
		  }
		  display: flex;
		  align-items: center;
		  font-size: 32rpx;
		  font-weight: 600;
	  }
	}
	
	.coupon-title {
	  font-size: 28rpx;
	  font-weight: 500;
	  color: #333;
	  margin-bottom: 30rpx;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	
	.coupon-price {
	  font-size: 32rpx;
	  // color: #EC691C;
	  font-weight: 600;
	}
	.Couponcode{
		padding: 30rpx 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		// background-color: #FFF;
		.name{
			font-size: 36rpx;
			font-weight: 700;
		}
		.msg{
			font-size: 26rpx;
             margin: 14rpx 0;
		}
		.code_img{
			// width: 260rpx;
			// height: 260rpx;
			// background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 100%;
				height: 100%;
			}
			margin: 10rpx 0 5rpx;
		}
		.code_nub{
			font-size: 24rpx;
			font-weight: 500;
            margin-top: 10rpx;
		}
	}
	.merchants{
		margin: -2rpx 0;
		padding: 30rpx;
		background-color: #fff;
        border-radius: 0 0 20rpx 20rpx;
		.title{
			margin-top: 40rpx;
			// padding-left: 15rpx;
			font-size: 32rpx;
			position: relative;
			padding-top: 50rpx;
			font-weight: bold;
			border-top: 1rpx solid #F3F3F3;
		}

		.sh{
			font-size: 26rpx;
			color: #333;
			margin: 24rpx 0 10rpx;
		}
		.add{
			color:#666;
			font-size: 24rpx;
		}
		.lbe{
			display: flex;
			font-size: 28rpx;
			justify-content: space-between;
			margin-top:40rpx;
			view:nth-child(1){
				color: #666;
			}
		}
		.mlb{
			display: flex;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			view:nth-child(1){
				color: #666;
				width: 170rpx;
			}
			view:nth-child(2){
				flex: 1;
			}
			margin-right: 20rpx;
		}
	}
</style>